<template>
  <!-- 只能有一个div根标签 -->
  <div class="tablebox">
    <el-table :data="list" style="width: 100%" max-height="780">
      <el-table-column type="index" label="序号" width="80"></el-table-column>
      <el-table-column prop="subjectName" label="所属学科"> </el-table-column>
      <el-table-column prop="directoryName" label="目录名称"> </el-table-column>
      <el-table-column prop="username" label="创建者"></el-table-column>
      <el-table-column prop="addDate" label="创建日期"
        ><template slot-scope="scope">
          {{ scope.row.addDate | parseTimeByString }}
        </template>
      </el-table-column>
      <el-table-column prop="totals" label="面试题数量"> </el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          {{ scope.row.state === 1 ? "已启用" : "已禁用" }}
        </template>
      </el-table-column>
      <el-table-column prop="zip" label="操作">
        <template slot-scope="scope">
          <el-button
            type="text"
            v-if="scope.row.state == 0"
            @click="open(scope.row)"
            >启用</el-button
          >
          <el-button
            type="text"
            v-if="scope.row.state == 1"
            @click="close(scope.row)"
            >禁用</el-button
          >
          <el-button
            type="text"
            :disabled="scope.row.state == 0 ? true : false"
            @click="revise(scope.row)"
            >修改</el-button
          >
          <el-button
            type="text"
            :disabled="scope.row.state == 0 ? true : false"
            @click="delbtn(scope.row)"
            >删除</el-button
          >
          <!-- 修改弹出层组件 -->
          <directorysAdd
            :subjectlist="subjectlist"
            ref="rective"
            @revtivesubject="revtivesubject"
          ></directorysAdd>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination
      v-if="allTag.counts > pagesize"
      class="page"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[5, 10, 20, 50]"
      layout=" ->,prev, pager, next,sizes, jumper"
      :page-size="pagesize"
      :total="allTag.counts"
      background
    >
    </el-pagination>
  </div>
</template>

<script>
import { Alllist, state, subjectlist, rectivesubject, del } from '../../../api/hmmm/directorys'
import Bus from './adb.js'
import directorysAdd from './directorys-add.vue'
export default {
  // 自定义组件名字(PascalCase)
  name: 'directorystable',
  components: { directorysAdd },
  props: {},
  data () {
    return {
      list: [],
      allTag: {}, // 所有数据
      pagesize: 10, // 数据尺寸
      curPage: 1, // 当前页数
      total: 0, // 数据条数
      value: true, // 显示隐藏
      subjectlist: [], // 头部组件传过来的学科目录
      rectivestate: {}// 储存点击修改获取的当前学科目录
    }
  },
  computed: {},
  watch: {},
  created () {
    this.getList()
    // 接收头部组件事件传过来的筛选数据
    Bus.$on('search', list => {
      // 替换全部数据
      this.list = list
    })
    Bus.$on('addlist', list => {
      // 替换全部数据
      this.getList()
    })
    // Bus.$on('subject', list => {
    //   // 替换全部数据
    //   this.subjectlist = list
    // })
  },
  mounted () { },
  methods: {
    async getList () {
      try {
        const { data } = await Alllist({
          page: this.curPage,
          pagesize: this.pagesize
        })
        // 每一行的数据
        this.list = data.items
        // 所有数据
        this.allTag = data
        // console.log(this.allTag.counts);
        this.$emit('alltag', this.allTag)
        // 总条数
        this.total = this.list.length
      } catch (err) {
        console.log(err.message)
      }
    },
    // 用户调整每页条数
    handleSizeChange (pagesize) {
      // 设置分页条数
      this.pagesize = pagesize
      // 重发请求
      this.getList()
    },
    // 分页
    handleCurrentChange (curPage) {
      this.curPage = curPage
      this.getList()
    },
    // 启用
    async open (scope) {
      // 点击启用让数据变未点击对应的状态码
      scope.state = 1
      await state({
        id: scope.id,
        state: scope.state
      })
    },
    // 禁用
    async close (scope) {
      // 点击启用 让状态改为1 禁用
      scope.state = 0
      await state({
        id: scope.id,
        state: scope.state
      })
    },
    // 修改
    async revise (scope) {
      // 打开弹出层
      this.$refs.rective.dialogFormVisible = true
      // 修改目录标题
      this.$refs.rective.proptitle = 0
      // 学科列表数据
      const { data } = await subjectlist()
      // console.log(data)
      this.subjectlist = data
      // 储存当前学科id
      this.rectivestate = scope
      console.log(scope)
    },
    // 弹出层确认按钮
    async revtivesubject (newlist) {
      // console.log(newlist)
      // 传递的新数据
      await rectivesubject({
        id: this.rectivestate.id,
        subjectID: newlist.region,
        directoryName: newlist.name
      })
      this.getList()
    },
    // 删除按钮
    delbtn (scope) {
      this.$confirm('此操作将永久删除该目录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        console.log(scope)
        await del(scope)
        this.getList()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

<style scpoed lang="scss">
.page {
  margin-top: 20px;
}
</style>
